<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<button>点击</button>

<body>
    <script>
        /* 
        1.没有arguments
        2.不能作为构造函数
        3.箭头函数没有this绑定,它的this是上层上下文(context)的this
        */

        // var fn = (name) => {
        //     this.name = name;//错误代码
        // }

        var btn = document.querySelector("button");
        btn.click = () => {
            console.log(this);
            setTimeout(() => {
                console.log(this);
                var obj = {
                    myname: "张三",
                    fn: () => {
                        //没有this,获取上一层的this
                        // this 穿透
                        console.log(this);
                    }
                }
                obj.fn();
            }, 500);
        }

        //变量的赋值规则
        function fn1() {
            function fn2() {
                function fn3() {
                    //a变量的赋值,会先找自己作用里的变量声明,
                    //如果有直接赋值,如果没有就在上层作用域查找赋值变量,
                    //一层一层向上赋值,直到赋值给全局变量
                    a = 10;
                    console.log(a); //10
                }
                fn3();
                console.log(a); //10
            }
            fn2();
            console.log(a); //10
        }
        fn1();
        console.log(a); //10
    </script>
</body>

</html>